<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>五子棋页面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

</head>
<style type="text/css">
#canvas {
	display: block;
	box-shadow: -2px -2px 2px #999, 3px 3px 3px #999;
	position: fixed;
	left: 200px;
	top: 20px;
	z-index: 10;
}

#canvas1 {
	display: block;
	box-shadow: -2px -2px 2px #999, 3px 3px 3px #999;
	position: fixed;
	left: 200px;
	top: 20px;
	z-index: 9999;
}
</style>
<body>
	<canvas id="canvas" width="600" height="600">第一块布</canvas>
	<canvas id="canvas1" width="600" height="600">第二块布</canvas>

	<button id="clear">清除</button>
	<script type="text/javascript">
    //数组初始化为空，存储落子的信息
    	var a=[];
    	for(var i=0;i<15;i++){
    		a[i]=[];
    		for(var j=0;j<15;j++){
    		a[i][j]=0;
    		}
    	}
    	//true（为黑子） false (为白字)
    	var me=true;
    	var h=false;
    	var xmlhttp;
    	var xmlhttp1;
    	var clear=document.getElementById("clear");
    	var canvas=document.getElementById("canvas");
    	content=canvas.getContext("2d");
    	var canvas1=document.getElementById("canvas1");
		content1=canvas1.getContext("2d");
    	//写字
    		content.font="60px Arial";
    	//content.strokeText("",180,300);

    	//绘制棋盘
    	for(i=0;i<15;i++){
    		content.strokeStyle="#BFBFBF";
    		//绘制横线
    		content.moveTo(20,20+i*40);
    		content.lineTo(580,20+i*40);
    		//绘制竖线
    		content.moveTo(20+i*40,20);
    		content.lineTo(20+i*40,580);
    		content.stroke();
    	}
    	
    	//绘制棋子
    	var pieces=function(i,j,me){
    		content1.beginPath();
    		content1.arc(20+i*40,20+j*40,19,0,2*Math.PI);
    		content1.closePath();
    		//棋子颜色的渐变
    		var gradient=content1.createRadialGradient(20+i*40+4,20+j*40-4,19,15+i*40+4,20+j*40-4,0);
    		if(me){
    		//黑棋
    			gradient.addColorStop(0,"#0A0A0A");
  				gradient.addColorStop(1,"#636766");
    		}else{
    		//白棋
    			gradient.addColorStop(0,"#D1D1D1");
 			 	gradient.addColorStop(1,"#FAFAFA");
    		}
    		content1.fillStyle=gradient;
    		content1.fill();
    	}
    	
    	//实现落子
    	canvas1.onclick=function(e){
    	var x=e.offsetX;
    	var y=e.offsetY;
    	var i=Math.ceil(Math.floor(x/40));
		var j=Math.ceil(Math.floor(y/40));
		
		if(a[i][j]==0){
		pieces(i,j,me);
		//向后台传值
		check1(i,j,me);
		if(me){
		a[i][j]=1;
		//alert("i:"+i+"   "+"j:"+j+"   "+"黑子");
		}else{
		a[i][j]=2;
		//alert("i:"+i+"   "+"j:"+j+"   "+"白子");
		}
		me=!me;
		}
    	}
    	
    		function check1(i,j,me){
 
  		var url = "<%=request.getContextPath()%>/servlet/Servlet?i="+i+"&j="+j+"&me="+me+"&h="+h;
  
 		 xmlhttp1 =new XMLHttpRequest(); 
 		 xmlhttp1.onreadystatechange=checkResult1; //响应函数
 		 xmlhttp1.open("get",url,true);   //设置访问的页面
  		 xmlhttp1.send(null);  //执行访问
}
    	
    	 //输赢的响应方法
function checkResult1(){
  if (xmlhttp1.readyState==4 && xmlhttp1.status==200){
 
  if(xmlhttp1.responseText.length>0){
  		alert(xmlhttp1.responseText);
  		//刷新页面
  		 location.reload();
  		}
    }
   }
    	
  //接受后台传来的值
		function check2(){
 		//h代表是否执行悔棋方法  0不执行  1执行
  		var url = "<%=request.getContextPath()%>/servlet/Servlet?h="+ h+"&me="+me;

				xmlhttp = new XMLHttpRequest();
				xmlhttp.onreadystatechange = checkResult2; //响应函数
				xmlhttp.open("get", url, true); //设置访问的页面
				xmlhttp.send(null); //执行访问
			}
			
		//悔棋  的响应方法
function checkResult2(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200)  
  		//交互成功获得相应数据为文本格式
  		var result = xmlhttp.responseText;
  		//解析获得的json格式数据
  		var json = eval("("+result+")");
  		//alert(json);
  		var size=json.length;
  		for(var i=0;i<size;i++){
  			alert(json[i].i+"   "+json[i].j);
  			content1.clearRect(json[i].i*40+20-19,json[i].j*40+20-19,38,38);
  			a[json[i].i][json[i].j]=0;
  			me=!me;
  		}
  		
   
  }     
   	
    //清除棋子
    clear.onclick=function(){
    	h=true;
    	  check2();
			h = !h;
		}
	</script>
</body>
</html>
